D3 是 Data-Driven Documents 的縮寫，他是基於 JavaScript 開發的一套視覺化工具。D3 是基於 Data-Driven 的概念，結合了 HTML、SVG、CSS 的 Web 繪圖工具。Data-Driven 的意思是先將資料載入後，在利用資料的內容觸發 HTML 上的 DOM 或物件。所以跟 JQuery 類似，都是基於 DOM 的操作。
<body>
</body>
<script src="http://d3js.org/d3.v3.js"></script>
// 引入 d3 library
<script>
d3.select("body")
.append("svg").attr("width", 50).attr("height", 50)
.append("circle").attr("cx", 25).attr("cy", 25).attr("r", 25).style("fill", "purple");
</script>
D3 也是圖層的概念，從程式碼來看的話是這樣：
因為 D3 提供的操作其實很完整，可以一筆一畫得刻出自己想要呈現的樣子。不過也因為這樣，網路上其實有相當多的範例可以使用。所以我們可以把精力花在處理及分析資料上，再從範例中選擇一個適合的圖形來帶入。
iThome鐵人賽
看影片追技術